<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 注意: 先引入 react基础库,再引入react dom解析库 -->
  <script src="lib/react/react.development.js"></script>
  <script src="lib/react/react-dom.development.js"></script>
  <script src="lib/babel.min.js"></script>
</head>
<body>
  <!-- 完整的声明周期函数 -->
  <div id="root"></div>
  <script type="text/babel">
    class HelloWorld extends React.Component {
      constructor(props){
        super(props);
        console.log('constructor....');
        this.state = {
          count: 0
        }
      }
      // 注意: static说明当前方法属于class,不能通过new获取.如果不声明static可能无法执行
      // 可以返回一个对象来更新state或者返回null不更新
      // 这个方法可以用于初始化某个state,使其在每次更新之后重新还原到最初的状态!
      static getDerivedStateFromProps(props, state){
        console.log('Derived...',state);
        return {
          age: 30
        };
      }
      // 这里可以控制某些state是否允许被render() 更新到UI
      // nextState 指最新的state,还没来得及更新到ui的state
      shouldComponentUpdate(nextProps, nextState){
        console.log('should...',nextState); // 1
        // 如果某个值是偶数 则更新,奇数不更新
        return nextState.count % 2 == 0;
      }
      componentDidMount(){
        console.log('didMount....');
        this.setState((state,props)=>({
          age: state.age + 1
        }))
        // 注意: setState在异步函数中的表现
        setInterval(()=>{
          this.setState({
            count: this.state.count + 1
          })
        },1000)
      }
      componentDidUpdate(){
        console.log('didUpdate....',this.state);
      }
      // 因为目前没有路由 所以不会执行
      componentWillUnMount(){
        console.log('willUnmount....');
      }
      render(){
        console.log('render....',this.state);
        return (
          <div>
            <p>count: {this.state.count}</p>  
            <p>age: {this.state.age}</p>
          </div>
        )
      }
    }
    // 使用react 相关api 渲染到容器
    ReactDOM.render(<HelloWorld />,document.getElementById('root'));
  </script>
</body>
</html>